<script setup>
import { ElTree } from "element-plus"
const defaultProps = {
  children: "children",
  label: "label"
}

const data = [
  {
    label: "A栋",
    id: 1,
    children: [
      {
        id: "1-1",
        label: "负一层"
      },
      {
        id: "1-2",
        label: "一层"
      },
      {
        id: "1-3",
        label: "二层"
      },
      {
        id: "1-4",
        label: "三层"
      }
    ]
  },
  {
    label: "B栋",
    id: 2,
    children: [
      {
        id: "2-1",
        label: "负一层"
      },
      {
        id: "2-2",
        label: "一层"
      },
      {
        id: "2-3",
        label: "二层"
      },
      {
        id: "2-4",
        label: "三层"
      }
    ]
  },
  {
    label: "C栋",
    id: 3,
    children: [
      {
        id: "3-1",
        label: "负一层"
      },
      {
        id: "3-2",
        label: "一层"
      },
      {
        id: "3-3",
        label: "二层"
      },
      {
        id: "3-4",
        label: "三层"
      }
    ]
  },
  {
    label: "E栋",
    id: 4,
    children: [
      {
        id: "4-1",
        label: "负一层"
      },
      {
        id: "4-2",
        label: "一层"
      },
      {
        id: "4-3",
        label: "二层"
      },
      {
        id: "4-4",
        label: "三层"
      }
    ]
  }
]

const handleNodeClick = (val) => {
  console.log(val)
}
</script>

<template>
  <el-tree
    class="tree"
    :data="data"
    highlight-current
    default-expand-all
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<style scoped lang="scss">
.tree {
  min-width: 200px;
  background-color: #545c64;
  color: #fff;
}
::v-deep .el-tree-node__content:hover {
  background-color: var(--main-color) !important;
  color: #fff !important;
}
::v-deep .is-current > .el-tree-node__content {
  background-color: var(--main-color) !important;
}
</style>
